<template>
    <div class="home-recommond">
        <h3>推荐歌单</h3>
         <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item,index) in listData" :key="index"
                @click="selectItem(item)">
                    <div class="cover">
                        <van-image :src="item.cover" radius="1rem"/>
                        <span>{{ item.listen_num | numFilter(1) }}万</span>
                    </div>
                    <span>{{ item.title }}</span>
                </li>
            </ul>
         </div>
    </div>
</template>
<script>
import {betterScrollHorizontal} from '../../common/betterScroll.js'
export default {
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getListData()
    },
    methods:{
        getListData(){
            this.$request("get","/recommend/playlist/u")
                .then(res=>{
                    // console.log(res)
                    if(res.result == 100){
                        this.listData = res.data.list;
                    }
                    // console.log(this.listData)
                    // 异步数据的一些处理
                    betterScrollHorizontal(this,this.$refs.wrapper,this.$refs.content,this.listData.length,10)//调用横向滚动的方法
                });
        },
        //列表项的点击事件
        selectItem(item){
            const id=item.content_id;
            // console.log(id);
            //1.命名的路由，并加上参数，让路由建立url
            // this.$router.push({
            //     name:"songlist",
            //     params:{
            //         id//等同于id:id
            //     }
            // })
            //2.
            // this.$router.push(`/songlist/${id}`)等于↓
            this.$router.push({path:`/songlist/${id}`})
        }
    },
    filters:{
        numFilter(value,num){
            return parseFloat(value/10000).toFixed(num)
        }
    }
}
</script>

<style scoped>
/* .home-recommond ul{
    display: flex;
    flex-wrap: wrap;
    width: calc(10rem * 12);
}
.home-recommond ul>li{
    width: calc((100% - 1rem) / 3 * 1);
    display: inline-block;
    width: 10rem;
} */
/* .home-recommond ul>li:nth-of-type(3n+2){} */

.cover > span{
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    widows: 5rem;
    display: inline-block;
}
.cover{
    position: relative;
}
.wrapper{
    width: 100%;
    overflow: hidden;
}
/* ul.content{
    width: calc(12 * 10rem);
}; */
ul.content li{
    display: inline-block;
    width: 10rem;
    vertical-align: top;
}
ul.content li *{
    margin: 0.1rem;
}
ul.content li > span{
    font-size: 0.8rem;
    color: #54493b;
}
</style>